<template>
		<!-- 底部模块盒子 -->
		<view class="footer-container u-border-top">
			<view class="input-box">
				<view class="input-box-flex">
					<!-- 语音/键盘切换,H5不支持 -->
					<!-- #ifdef APP-PLUS -->
					<view>
						<image v-if="chatType === 'voice'" class="icon_img"
							:src="require('@/static/image/chat/voice/voice.png')" @click="switchChatType('keyboard')">
						</image>
						<image v-if="chatType === 'keyboard'" class="icon_img"
							:src="require('@/static/image/chat/keyboard.png')" @click="switchChatType('voice')">
						</image>
					</view>
					<!-- #endif -->
					<!-- 中间的输入框或者语音录入显示框 -->
					<view class="input-box-flex-grow">
						<view v-if="chatType === 'voice'" class="textArea-box">
							<scroll-view :scroll-y="true" :scroll-x="false" class="inputScroll" :show-scrollbar="true">
								<textarea style="text-indent:5upx;" auto-height="true"
									placeholder-style="color:#DDDDDD;" :cursor-spacing="10" :confirm-hold="true"
									confirm-type="send" :show-confirm-bar="false" :focus="inputFocusFlag"
									:auto-focus="false" :hold-keyboard="true" @blur="onBlur" @focus="onInputFocus"
									@confirm="$noClicks(confirmSendText)" v-model="sendStr" :cursor="sendStr.length"
									:maxlength="-1">
								</textarea>
							</scroll-view>
						</view>
						<!-- #ifdef APP-PLUS -->
						<view v-if="chatType === 'keyboard'" class="voice_title" @touchstart.stop.prevent="startVoice"
							@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice"
							@touchcancel.stop="cancelVoice" :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }">
							<text>{{ voiceTitle }}</text> 
						</view>
						<!-- #endif -->
					</view>
					<!-- 功能性按钮 表情-->
					<view>
						<image class="u-m-l-20" :src="require('@/static/image/chat/emoji.png')" @click="changeEmojiBox">
						</image>
					</view>
					<!-- 宫格 -->
					<view>
						<image class="u-m-l-20" :src="require('@/static/image/chat/add.png')" @click="changeDrawer">
						</image>
					</view>
					<view class="u-m-l-16" @touchend.prevent="$noClicks(sendText)">
						<u-button type="success" :custom-style="customSendBtnStyle">
							<text>发送</text>
						</u-button>
					</view>
				</view>
				<view class="fun-box u-border-top" :class="{'show-fun-box':showFunBtn}">
					<u-grid :col="4" :border="false" @click="funGirdItemClick">
						<u-grid-item v-for="(item, index) in funList" :index="index" :key="index"
							:custom-style="{padding:'20rpx 0'}" bg-color="#f8f8f8">
							<view class="u-flex u-row-center u-col-center"
								style="background-color: #FFFFFF;width: 110rpx;height: 110rpx;border-radius: 30rpx;">
								<u-icon :name="item.icon" :size="60"></u-icon>
							</view>
							<view class="grid-text" style="font-size: 24rpx;">
								<text>{{ item.title }}</text>	
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="fun-box u-border-top" :class="{'show-fun-box':showEmojiBox}">
					<swiper class="emoji-swiper" :indicator-dots="false" :duration="50" :vertical="true">
						<swiper-item v-for="(item,index) in faceList" :key="index">
							<view v-for="(childrenItem, childrenIndex) in item" :key="childrenIndex"
								@tap="addEmoji(childrenItem,index)">
								<image v-if="index<6" class="emo-image" :src="emojiUrl + emojiMap[childrenItem]">
								</image>
								<image v-else class="face-img" :src="faceUrl + childrenItem + '@2x.png'">
								</image>
							</view>
						</swiper-item>
					</swiper>
					<view v-if="showEmojiBox" style="padding:0rpx 20rpx;position: absolute;bottom: 1rpx;right: 10rpx;
								width: 250rpx;height: 150rpx;z-index: 1000;opacity: 0.9;" class="u-flex u-row-right u-col-center">
						<view class="u-flex u-row-center u-col-center"
							style="border: 1px solid #f1f1f1;border-radius: 10rpx; background-color: #82848a;width: 100rpx;padding: 15rpx 20rpx;margin-right: 8rpx;">
							<view @click="delSendStr()" @longpress="clearSendStr()">
								<u-icon name="backspace" size="46" color="#ffffff"></u-icon>
							</view>
						</view>
						<!-- <view>
							<u-button @click="$noClicks(sendText)" type="success" :custom-style="{padding:'20rpx'}">发送
							</u-button>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 录音动画 -->
			<!-- #ifdef APP-PLUS -->
			<view class="voice_an" v-if="recording">
				<view class="voice_an_icon">
					<view id="one" class="wave"></view>
					<view id="two" class="wave"></view>
					<view id="three" class="wave"></view>
					<view id="four" class="wave"></view>
					<view id="five" class="wave"></view>
					<view id="six" class="wave"></view>
					<view id="seven" class="wave"></view>
				</view>
				<view class="text">
					<text>{{voiceIconText}}</text>
				</view>
			</view>
			<!-- #endif -->
		</view>
</template>

<script>
	import faceUtil from "@/util/emojiMap.js"; //表情
	import permission from '@/common/mobilePermission/permission.js'; //手机权限
	export default {
		name:"chat-input-bar",
		data() {
			return {
				sendMsgTimmer: null, //发送时间定时器
				sendDuring: 0, //发送时间计数器  1分钟以内的信息不显示时间
				sendTimeBetween: 60, //发送信息显示的间隔，60秒以内信息不显示发送时间
				sendStr: '', //输入框字符串
				inputFocusFlag: false, //输入框是否获取到焦点			
				customSendBtnStyle: { //发送按钮的自定义样式
					padding: '10rpx 20rpx',
				},				
				chatType:'voice',
				showFunBtn: false, //是否展示功能型按钮
				showEmojiBox: false, //是否显示表情弹窗
				//功能菜单
				funList: [{
						id: 1,
						icon: "photo-fill",
						title: "照片",
						uploadType: ["album"]
					},
					{
						id: 2,
						icon: "camera-fill",
						title: "视频",
						uploadType: ["camera"]
					},
				],
				emojiUrl: faceUtil.emojiUrl, //表情请求前缀（腾讯）
				emojiMap: faceUtil.emojiMap, //表情包集合（腾讯）
				emojiName: faceUtil.emojiName, //表情名称（腾讯）
				faceUrl: faceUtil.faceUrl, //特殊表情请求前缀（腾讯）
				faceList: [], //自定义表情对象集合，有腾讯数据提供转换而来
				//==========发送语音信息相关，H5不支持==========
				Recorder: null, //获取全局唯一的录音管理器
				Audio: null, //音频对象
				recording: false, //标识是否正在录音
				isStopVoice: false, //加锁 防止点击过快引起的当录音正在准备(还没有开始录音)的时候,却调用了stop方法但并不能阻止录音的问题
				voiceInterval: null, //录音定时器
				voiceTime: 0, //总共录音时长
				voiceCanSend: true, //是否可以发送
				PointY: 0, //录音上划取消坐标位置
				voiceIconText: "正在录音...", //录音动作提示语
				voiceTitle: '按住 说话',
				AudioExam: null, //正在播放音频的实例		
				noClick: true, //防止重复点击																				
			};
		},
		watch: {
			//监听H5键盘是否拉起的高度
			inputFocusFlag: function(inputFocus) {
				let that = this;
				// #ifdef H5
				console.log("输入框焦点变化", inputFocus);
				if (inputFocus == true) {
					that.showFunBtn = false;
					that.showEmojiBox = false;
					console.log("H5键盘打开", that.scrollViewHeight);
				}
				// #endif
			},
		},		
		created:function(){
			let that=this;
			let emjiList = faceUtil.splitEmojiList();
			this.faceList = emjiList;
			//录音器，getRecorderManager不支持H5
			// #ifdef APP-PLUS
			//获取全局唯一的录音管理器（https://uniapp.dcloud.net.cn/api/media/record-manager.html#getrecordermanager）
			that.Recorder = uni.getRecorderManager();
			//创建并返回内部 Audio对象。(https://uniapp.dcloud.net.cn/api/media/audio-context.html#createinneraudiocontext)
			that.Audio = uni.createInnerAudioContext(); //音频
			//录音开始事件
			that.Recorder.onStart(e => {
				that.beginVoice();
			});
			//录音结束事件
			that.Recorder.onStop(res => {
				clearInterval(that.voiceInterval);
				that.handleRecorder(res);
			});
			//音频停止事件
			that.Audio.onStop(e => {
				that.closeAnmition();
			});
			//音频播放结束事件
			that.Audio.onEnded(e => {
				that.closeAnmition();
			});
			// #endif					
		},
		mounted:function(){
			
		},
		methods: {
			//切换语音或者键盘方式
			switchChatType(type) {
				let that = this;
				that.chatType = type;
				//底部菜单隐藏
				if (this.showFunBtn == true) {
					this.showFunBtn = false;
				}
				//表情弹窗
				if (this.showEmojiBox == true) {
					this.showEmojiBox = false;
				}
				if (type == "voice") {
					this.inputFocusFlag = true;
				} else {
					if (uni.getSystemInfoSync().platform == "android") {
						permission.requestAndroid("android.permission.RECORD_AUDIO"); //Android请求录音权限
					} else {
						permission.requestIOS("record"); //ios请求录音权限
					}
				}
			},
			//选中了表情
			addEmoji: function(emojiItem, index) {
				let that = this;
				that.sendStr += emojiItem;
			},
			//删除表情和文字
			delSendStr: function() {
				//console.log("删除表情",this.sendStr);
				let emojiStr = this.sendStr;
				let emojiArr = [];
				emojiStr = emojiStr.replace(/\[([^(\]|\[)]*)\]/g, function(item, index) {
					emojiArr.unshift(item);
				});
				if (emojiArr.length > 0) {
					if (this.sendStr.endsWith(emojiArr[0])) {
						this.sendStr = this.sendStr.replace(emojiArr[0], "");
					} else {
						this.sendStr = this.sendStr.slice(0, this.sendStr.length - 1);
					}
				} else {
					this.sendStr = this.sendStr.slice(0, this.sendStr.length - 1);
				}
			},
			//清除文本
			clearSendStr: function() {
				console.log("长按删除")
				this.sendStr = "";
			},
			//隐藏功能或者表情抽屉盒子
			hideDrawer: function() {
				let that = this;
				if (this.showFunBtn == true) {
					uni.hideKeyboard();
					this.showFunBtn = false;
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
				}
				if (this.showEmojiBox == true) {
					uni.hideKeyboard();
					this.showEmojiBox = false;
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
				}
			},						
			//输入框获取到焦点事件
			onInputFocus: function(event) {
				//console.log("输入框获取到焦点",event);
				this.inputFocusFlag = true;
			},			
			//输入框失去焦点事件
			onBlur: function(event) {
				let that = this;
				let text = event.target.value;
				console.log("输入框失去焦点", text);
				this.inputFocusFlag = false;
			},
			//键盘确认发送
			confirmSendText: function(e) {
				let that = this;
				that.sendText();
			},
			//发送文字
			sendText: function() {
				let that = this;
				if (that.sendStr.length < 1) {
					uni.hideKeyboard();
					that.globalUtil.utilAlert("不能发送空字符串");
					return;
				} else {
					//如果文字中有表情,需要转换处理
					let formatStr = this.replaceEmoji(this.sendStr);
					let content = {
						"text": formatStr, //文本内容
					};
					console.log("发送文本信息",content);
					that.sendMsg(this.messageApi.MSG_TYPE.USER_MSG,
												this.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
												content);
					return;
				}
			},
			//表情替换
			replaceEmoji(str) {
				let that = this;
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					for (let i = 0; i < that.faceList.length; i++) {
						let row = that.faceList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM == item) {
								let imgstr = "face" + EM;
								return imgstr;
							}
						}
					}
				});
				return replacedStr;
			},	
			//控制表情弹窗
			changeEmojiBox: function() {
				let that = this;
				that.showFunBtn = false; //关闭功能盒子
				that.showEmojiBox = !that.showEmojiBox; //控制表情弹窗
				uni.hideKeyboard(); //隐藏键盘
				//这里要根据是否打开表情弹窗控制聊天列表盒子的高度
				if (that.showEmojiBox) {
					that.chatType = "voice";
				}
			},														
			//切换功能性按钮
			changeDrawer() {
				let that = this;
				that.showEmojiBox = false;
				that.showFunBtn = !that.showFunBtn;
				uni.hideKeyboard();
				if (that.showFunBtn) {
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831 - 200;
				} else {
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
				}
			},
			//功能弹窗点击事件
			funGirdItemClick: function(index) {
				let that = this;
				if (!that.vuex_WSObj) {
					that.globalUtil.utilAlert("网路故障，服务不可达");
					return;
				}
				let id = that.funList[index].id;
				that.inputFocusFlag = false;
				switch (id) {
					case 1:
						that.chooseImage(that.messageApi.CONTENT_TYPE.IMG_CONTENT_TYPE); //选择照片
						break;
					case 2:
						that.chooseVideo(that.messageApi.CONTENT_TYPE.VIDEO_CONTENT_TYPE); //选择视频
						break;
					default:
						break;
				}
			},
			//从相册或者拍照发送图片
			chooseImage(contentType) {
				let that = this;
				uni.chooseImage({
					count: 9,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image) => {
									image.tempFilePath = image.path;
									let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
									let maxH = uni.upx2px(350); //350是定义消息图片最大高度
									if (image.width > maxW || image.height > maxH) {
										let scale = image.width / image.height;
										image.width = scale > 1 ? maxW : maxH * scale;
										image.height = scale > 1 ? maxW / scale : maxH;
									}
									delete image.errMsg;
									delete image.path;
									setTimeout(function() {
										that.uploadFile(image, contentType);
									}, 1500);
									return;
								}
							});
						}
					},
					fail() {
						console.log("选择图片上传发送异常");
					}
				});
			},
			//选择视频或者 拍摄视频
			chooseVideo(contentType) {
				let that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					compressed: false,
					success: function(res) {
						delete res.errMsg;
						let video = {
							width: res.width,
							height: res.height,
							tempFilePath: res.tempFilePath
						};
						let tempFilePath = res.tempFilePath;
						if (!tempFilePath) {
							that.globalUtil.utilAlert("失败!");
							return;
						}
						let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
						let maxH = uni.upx2px(350); //350是定义消息图片最大高度
						if (video.width > maxW || video.height > maxH) {
							let scale = video.width / video.height;
							video.width = scale > 1 ? maxW : maxH * scale;
							video.height = scale > 1 ? maxW / scale : maxH;
						}
						//获取视频第一帧
						// #ifdef APP-PLUS
						let target = that.$u.api.multipartAddress.target;
						if (target == "local") {
							that.globalUtil.getVideoImage(that, tempFilePath, {
								complete: function(res) {
									console.log("本地上传视频获取第一帧结果", res);
									if (res) {
										video.screenShot = res;
									}
								}
							});
						}
						// #endif
						setTimeout(function() {
							that.uploadFile(video, contentType);
						}, 1500);
					}
				});
			},														
			//上传文件 contentType 2图片 3视频 4语音 5文件
			uploadFile: function(tempFileInfo, contentType) {
				let that = this;
				//console.log("上传文件本地信息",tempFileInfo);
				if (tempFileInfo.errMsg) {
					delete tempFileInfo.errMsg;
				};
				let target = that.$u.api.multipartAddress.target;
				const uploadTask = uni.uploadFile({
					url: that.$u.api.multipartAddress.updload,
					filePath: tempFileInfo.tempFilePath,
					name: 'fileName',
					header: {
						'Access-Control-Allow-Origin': '*',
						'TOKEN_IM': that.vuex_token,
					},
					success: (uploadFileRes) => {
						if (uploadFileRes.statusCode == 200 && uploadFileRes.data.length > 0) {
							let resObj = JSON.parse(uploadFileRes.data);
							if (resObj.code == 200) {
								let fileInfo = resObj.data;
								let fileMsgObj = Object.assign(tempFileInfo, fileInfo);
								fileMsgObj.fileSaveTarget = target;
								console.log("发送文件信息参数", fileMsgObj);
								that.sendMsg(this.messageApi.MSG_TYPE.USER_MSG, contentType, fileMsgObj);
							} else {
								console.log("文件上传失败");
							}
						} else {
							console.log("文件上传失败");
						}
					},
					fail: function() {
						console.log("文件上传失败");
					},
					complete: function() {
						uni.hideLoading();
					}
				});
			},														
			/*----------------------------------------------------（H5不支持）录音相关 start-------------------------------------- */
			//准备开始录音
			startVoice(e) {
				if (!this.Audio.paused) {
					//如果音频正在播放 先暂停。
					this.stopAudio(this.AudioExam)
				}
				this.recording = true;
				this.isStopVoice = false;
				this.voiceCanSend = true;
				this.voiceIconText = "正在录音..."
				this.PointY = e.touches[0].clientY;
				this.Recorder.start({
					format: 'mp3'
				});
			},
			//录音已经开始
			beginVoice() {
				let that = this;
				if (that.isStopVoice) {
					that.Recorder.stop();
					return;
				}
				that.voiceTitle = '松开 结束'
				that.voiceInterval = setInterval(() => {
					console.log("that.voiceTime", that.voiceTime);
					if (that.voiceTime > 49) {
						that.voiceIconText = "录音结束倒计时[" + (60 - that.voiceTime) + "]s";
					};
					if (that.voiceTime == 60) {
						clearInterval(that.voiceInterval);
						that.endVoice();
					}
					that.voiceTime++;
				}, 1000)
			},
			//move 正在录音中
			moveVoice(e) {
				const PointY = e.touches[0].clientY;
				const slideY = this.PointY - PointY;
				if (slideY > uni.upx2px(120)) {
					this.voiceCanSend = false;
					this.voiceIconText = '松开手指 取消发送 '
				} else if (slideY > uni.upx2px(60)) {
					this.voiceCanSend = true;
					this.voiceIconText = '手指上滑 取消发送 '
				} else {
					this.voiceIconText = '正在录音... '
				}
			},
			//结束录音
			endVoice() {
				this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
				this.Recorder.stop();
				this.voiceTitle = '按住 说话'
			},
			//录音被打断
			cancelVoice(e) {
				console.log("路由被打断", e);
				this.voiceTime = 0;
				this.voiceTitle = '按住 说话';
				this.voiceCanSend = false;
				this.Recorder.stop();
			},
			//处理录音文件
			handleRecorder({tempFilePath,duration	}) {
				if (this.voiceTime < 1) {
					this.voiceIconText = "说话时间过短";
					setTimeout(() => {
						this.recording = false;
					}, 500)
					return;
				}
				let contentDuration = this.voiceTime;
				this.voiceTime = 0;
				this.recording = false;
				clearInterval(this.voiceInterval);
				console.log("录音文件", tempFilePath);
				console.log("是否发送语音信息", this.voiceCanSend);
				let voiceFile = {
					tempFilePath: tempFilePath,
					contentDuration: Math.ceil(contentDuration),
					anmitionPlay: false,
				};
				if (this.voiceCanSend) {
					console.log("=====上传语音文件，并发送语音信息====");
					let audioType = this.messageApi.CONTENT_TYPE.AUDIO_CONTENT_TYPE;
					this.uploadFile(voiceFile, audioType);
					return;
				} else {
					console.log("=====已经取消发送语音信息====")
					return;
				}
			},
			//控制播放还是暂停音频文件
			handleAudio(item) {
				this.AudioExam = item;
				this.Audio.paused ? this.playAudio(item) : this.stopAudio(item);
			},
			//播放音频
			playAudio(item) {
				let target = item.content.fileSaveTarget;
				let src = item.content.fullPath;
				if (target == "local") {
					src = this.$u.api.multipartAddress.getFileByPath + src;
				}
				this.Audio.src = src;
				this.Audio.hasBeenSentId = item.id;
				this.Audio.play();
				let currentAudioMsg = this.messageList.find(it => it.id == item.id);
				currentAudioMsg.content.anmitionPlay = true;
			},
			//停止音频
			stopAudio(item) {
				let currentAudioMsg = this.messageList.find(it => it.id == item.id);
				currentAudioMsg.content.anmitionPlay = false;
				this.Audio.src = '';
				this.Audio.stop();
			},
			//关闭动画
			closeAnmition() {
				const hasBeenSentId = this.Audio.hasBeenSentId;
				let item = this.messageList.find(it => it.id == hasBeenSentId);
				item.content.anmitionPlay = false;
			},
			/*-------------------------------------录音相关方法块  end---------------------------------------------------*/
			sendMsg: function(msgType, contentType, contentObj) {
				this.$emit('sendMsg', msgType,contentType,contentObj);
			}
		}
	}
</script>

<style scoped lang="scss">
		.footer-container {
			&-showfn {
				padding-bottom: 0rpx;
				padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
				padding-bottom: calc(420rpx + env(safe-area-inset-bottom));
			}
	
			&-box {
				height: auto;
				min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
				box-sizing: content-box;
				position: relative;
				padding-bottom: 120rpx;
			}
	
			.input-box {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				box-sizing: content-box;
				z-index: 999;
				background-color: #f9f9f9 !important;
	
				&-flex {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: nowrap;
					flex-direction: row;
					padding: 20rpx;
					box-sizing: border-box;
	
					image {
						width: 60rpx;
						height: 60rpx;
					}
	
					.icon_img {
						margin-right: 20rpx;
					}
	
					.icon_btn_add {
						margin-left: 20rpx;
					}
	
					&-grow {
						flex-grow: 1;
	
						.content {
							box-sizing: border-box;
							background-color: #fff;
							height: 80rpx;
							padding: 0 20rpx;
							border-radius: 12rpx;
							font-size: 30rpx;
							caret-color: $uni-color-success;
						}
	
						.textArea-box {
							width: 100%;
							background-color: #FFFFFF;
							border-radius: 10upx;
							//padding-left: 30upx;
							min-height: 70upx;
							display: flex;
							align-items: center;
	
							textarea {
								width: 100%;
							}
						}
	
						.inputScroll {
							max-height: 180upx;
						}
	
						/* 语音标题 */
						.voice_title {
							text-align: center;
							background-color: #ffffff;
							height: 80rpx;
							line-height: 80rpx;
							border-radius: 12rpx;
							font-weight: bold;
							font-size: 32rpx;
						}
	
					}
	
					.btn {
						margin-left: 20rpx;
						background-color: $u-type-success;
						border: none;
					}
				}
	
				.fun-box {
					opacity: 0;
					transition: all 0.1s ease-in-out;
					height: 0;
	
					.grid-text {
						padding-top: 10rpx;
						color: $uni-text-color-grey;
						font-size: 30rpx;
					}
	
				}
	
				.show-fun-box {
					opacity: 1;
					height: 400rpx;
	
					.emoji-swiper {
						height: 400rpx;
	
						swiper-item {
							display: flex;
							align-content: flex-start;
							flex-wrap: wrap;
	
							view {
								width: 12%;
								height: 16vw;
								display: flex;
								justify-content: center;
								align-items: center;
	
								image {
									width: 8.4vw;
									height: 8.4vw;
								}
							}
						}
					}
				}
			}
	
			/* 语音动画 */
			.voice_an {
				width: 300rpx;
				height: 300rpx;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -55%);
				background-color: rgba(41, 41, 41, 0.7);
				color: white;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				border-radius: 10rpx;
	
				.text {
					padding-top: 30rpx;
				}
	
				@keyframes runVoice {
					0% {
						height: 10%;
					}
	
					20% {
						height: 50%;
					}
	
					50% {
						height: 100%;
					}
	
					80% {
						height: 50%;
					}
	
					100% {
						height: 0%;
					}
				}
	
				.wave {
					width: 6rpx;
					height: 100%;
					margin-left: 10rpx;
					border-radius: 50rpx;
					background-color: #999;
					vertical-align: middle;
					display: inline-block;
				}
	
				.voice_an_icon {
					width: 200rpx;
					height: 100rpx;
					line-height: 50rpx;
					margin: 50rpx 0;
				}
	
				.voice_an_icon #one {
					animation: runVoice 0.6s infinite 0.1s;
				}
	
				.voice_an_icon #two {
					animation: runVoice 0.6s infinite 0.3s;
				}
	
				.voice_an_icon #three {
					animation: runVoice 0.6s infinite 0.6s;
				}
	
				.voice_an_icon #four {
					animation: runVoice 0.6s infinite 0.1s;
				}
	
				.voice_an_icon #five {
					animation: runVoice 0.6s infinite 0.3s;
				}
	
				.voice_an_icon #six {
					animation: runVoice 0.6s infinite 0.6s;
				}
	
				.voice_an_icon #seven {
					animation: runVoice 0.6s infinite 0.1s;
				}
			}
		}
</style>